<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
		<link type="text/css" href="theme/epoch/site.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.min.js"></script>
		<title>Site Title</title>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<a href="#" id="logo">Sapien Forums</a>
				<div id="header-nav">
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">Search</a></li>
						<li><a href="#">Help</a></li>
						<li><a href="#">Admin</a></li>
						<li><a href="#">Login</a></li>
					</ul>
				</div>
				<div class="clear"></div>
				<!-- <h1>Section Header</h1> -->
			</div>
			<div id="content">
				<div id="content-nav">
					<div class="optmenu rounded">
						<h3 class="rounded-top">Option Heading 1</h3>
						<div class="optmenu-body">
							<ul>
								<li><a href="">Option 1</a></li>
								<li><a href="">Option 2</a></li>
								<li><a href="">Option 3</a></li>
								<li><a href="">Option 4</a></li>
							</ul>
						</div>
					</div>
					<div class="optmenu rounded">
						<h3 class="rounded-top">Option Heading 1</h3>
						<div class="optmenu-body">
							<ul>
								<li><a href="">Option 1</a></li>
								<li><a href="">Option 2</a></li>
								<li><a href="">Option 3</a></li>
								<li><a href="">Option 4</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div id="content-body">
					<h2>Content Header</h2>
					<div class="uitabs">
						<ul>
							<li><a href="#tabs-4">First</a></li>
							<li><a href="#tabs-5">Second</a></li>
							<li><a href="#tabs-6">Third</a></li>
						</ul>
						<div id="tabs-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
						<div id="tabs-5">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
						<div id="tabs-6">
							<form action="#id" id="myform">
								<div class="form-body">
									<div class="field">
										<label for="myform_name">Name</label>
										<input type="text" name="name" id="myform_name" class="txt"/>
										<div class="field-msg info rounded">A message about the field here.</div>
									</div>
									<div class="field">
										<label for="myform_email">Email</label>
										<input type="text" name="email" id="myform_email" class="txt"/>
										<div class="field-msg error rounded">A message about the field here.</div>
									</div>
									<div class="field">
										<label for="myform_password">Password</label>
										<input type="password" name="password" id="myform_password" class="txt"/>
										<div class="field-msg error rounded hidden">A message about the field here.</div>
									</div>
									<div class="field">
										<label for="myform_description">Description</label>
										<textarea rows="" cols="" class="txt" name="description" id="myform_description"></textarea>
										<div class="field-area-msg error rounded">A message about the field here.</div>
									</div>
									<div class="field">
										<input type="submit" value="I agree continue" />
									</div>
								</div>
							</form>
						</div>
					</div>
					<p>Hello World</p>
					<div id="dialog" title="Basic dialog">
						<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
					</div>
					<div class="form-container rounded fixed">
						<h3 class="rounded-top">User Settings</h3>
						<form action="#id" id="myform2">
							<div class="form-body">
								<div class="field">
									<label for="myform2_name">Name</label>
									<input type="text" name="name" id="myform2_name" class="txt"/>
									<div class="field-msg info rounded">A message about the field here.</div>
								</div>
								<div class="field">
									<label for="myform2_email">Email</label>
									<input type="text" name="email" id="myform2_email" class="txt"/>
									<div class="field-msg warn rounded">A message about the field here.</div>
								</div>
								<div class="field">
									<label for="myform2_password">Password</label>
									<input type="password" name="password" id="myform2_password" class="txt"/>
									<div class="field-msg error rounded hidden">A message about the field here.</div>
								</div>
								<div class="field">
									<label for="myform2_description">Description</label>
									<textarea rows="" cols="" class="txt" name="description" id="myform2_description"></textarea>
									<div class="field-area-msg error rounded">A message about the field here.</div>
								</div>
								<div class="field">
									<input type="button" value="I agree continue" onclick="alert('test ' + $('.sortable li').attr('class')); $('.sortable li').removeAttr('class');"/>
								</div>
							</div>
						</form>
					</div>
					<div class="success rounded">Registration created successfully.</div>
					<div class="box rounded">
						<p>
							Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis
							luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus,
							fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.
							Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing.
							Aenean sagittis.
						</p>
						<div class="success rounded">No Categories exist.</div>
						<div class="info rounded">No Categories exist.</div>
						<div class="warn rounded">No Categories exist.</div>
						<div class="error rounded">No Categories exist.</div>
						<ul class="sortable">
							<li id="categoryId_1" class="beta">
								<span class="item">Category 1</span>
								<span class="opts">
									<a class="edit" href="category-edit?id=1">Edit</a>
									<a class="remove" href="category-remove?id=1">Remove</a>
								</span>
							</li>
							<li id="categoryId_2" class="beta">
								<span class="item">Category 2</span>
								<span class="opts">
									<a class="edit" href="category-edit?id=2">Edit</a>
									<a class="remove" href="category-remove?id=2">Remove</a>
								</span>
							</li>
							<li id="categoryId_3" class="beta">
								<span class="item">Category 3</span>
								<span class="opts">
									<a class="edit" href="category-edit?id=3">Edit</a>
									<a class="remove" href="category-remove?id=3">Remove</a>
								</span>
							</li>
							<li id="categoryId_4" class="beta">
								<span class="item">Category 4</span>
								<span class="opts">
									<a class="edit" href="category-edit?id=4">Edit</a>
									<a class="remove" href="category-remove?id=4">Remove</a>
								</span>
							</li>
						</ul>
						<a href="category-add">Create a new category</a>
					</div>
				</div>
				<div class="clear">&nbsp;</div>
			</div>
			<div id="footer">
				
			</div>
		</div>
		<script type="text/javascript">
		$(function() {
			$('.uitabs').tabs();
			$('.sortable').sortable({
				update: function(event, ui) {
					if (window.console) {
						window.console.log($(this).sortable('serialize'));
					}
				},
				stop: function(event, ui) {
					if (window.console) {
						window.console.log('stopped');
					}
					// Fix for ie issue with sortable.
					if ($.support.style == false) {
						setTimeout("$('.sortable li').addClass('')", 100);
					}
				},
				placeholder: 'highlight'
			});
			$('#dialog').dialog();
		});
		</script>
	</body>
</html>
